<template>
    <div>
        <h1>新增班级</h1>
        <el-form :inline="true" :model="classes" class="demo-form-inline">
   <label for="" class="sub">班级
        <input type="text" v-model="classes.name"  class="sub2">
  </label>
 <el-form-item label="专业" prop="subject">
    <el-select v-model="classes.subjectsId" placeholder="请选择专业">
      <el-option :label="item.name" :value="item._id" v-for="item in rows" :key="item._id"></el-option>

    </el-select>
  </el-form-item>
 <el-form-item label="班主任" prop="subject">
    <el-select v-model="classes.directorsId" placeholder="请选择班主任">
      <el-option :label="item.name" :value="item._id" v-for="item in teacherData" :key="item._id"></el-option>

    </el-select>
  </el-form-item>



  <el-form-item>
    <el-button type="primary" @click="onSubmit">确认添加</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
  const {mapActions}=  createNamespacedHelpers('classes') 
  const { mapActions:subjectActions ,mapState:subjectState} =  createNamespacedHelpers("subject");
  const { mapActions:teacherActions ,mapState:teacherState} =  createNamespacedHelpers("teacher");
export default {
      data() {
            return {
                 classes:{}
            }
        },
          created() {
            this.getSubjectAsync()
            this.getTeacherAsync()
        },
        computed:{
           ...subjectState(['rows']),
           ...teacherState({teacherData: 'rows'}),
      },
           methods: {
              ...subjectActions(['getSubjectAsync']),
              ...teacherActions(['getTeacherAsync']),
              ...mapActions(['addClass']),
             async  addOne(){   
                       const data=await this.addClass(this.classes)
                       console.log('新增成功',data);
                         if(data.code){
                           this.$message({
                              message: '新增班级成功',
                              type: 'success'
                            });
                            this.$router.push('/home/classesList')
                         }
               },
           async onSubmit() {
             this.addOne()
                
      }
      
        
    }
}
</script>

<style scoped>  
.sub{
    font-size: 20px;
}
.sub2{
    height: 23px;
    margin-right: 10px;
}
</style>